
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="js/txx.js" ></script>
</head>
<body>
<div id="app">
    <my-header></my-header>
    <main class="c900 el-card" style="align-items: stretch;overflow: visible">
        <h2 style="text-align: center">租车记录</h2>
        <el-card style="width: 100%">
            <div class="flex" style="font-weight: bolder">
                <span>编号</span>
                <span>车辆照片</span>
                <span>品牌车型</span>
                <span>起止日期</span>
                <span style="text-align: center">金额</span>
                <span>状态</span>
                <span>操作</span>
            </div>
        </el-card>
        <el-card style="width: 100%;height: 416px">
            <div class="flex" v-for="item in lease" >
                <span>{{item.id}}</span>
                <span v-for="cars in item.car"><img :src="cars.image" style="width: 120px;height: 90px"></span>
                <span v-for="cars in item.car">{{cars.brand}}:{{cars.model}}</span>
                <span>{{item.days.split(",").sort()[0]}}<br>~<br>{{item.days.split(",").sort()[item.days.split(",").length - 1]}}</span>
                <span class="price">{{item.money}}<small>元</small></span>
                <span>{{item.state}}</span>
                <span v-if="item.state === '提车' "><a class="abtn">归还租车</a></span>
                <span v-else-if="item.state === '还车'"><a class="abtn" style="background-color: coral">等待支付</a></span>
                <span v-else><a class="abtn"  style="background-color: limegreen">订单完成</a></span>
            </div>
        </el-card>

        <div style="text-align: right; margin-top: 20px">
            <el-pagination
                    :page-size="where.pageSize"
                    @current-change="findPage"
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
        </div>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data:{
            where:{pageNum:1, pageSize:4},
            lease:{},
        },
        created(){
            this.query();
        },
        methods:{
            findPage(page){
                this.where.pageNum = page;
                this.query();
            },
            query(){
                axios.get("txx/lease/query",{
                    params:{pageNum:this.where.pageNum,
                        pageSize:this.where.pageSize}
                }).then(res=>{
                    if(res.data.code == 1){
                        this.lease = res.data.data;
                    }else{
                        this.$message(res.data.msg);
                    }
                })
            }
        }

    })


</script>
</body>
</html>
<style>

</style>
